<template>
    <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">
                <!-- 路由跳转并携带params参数，:to的字符串写法 -->
                <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}/${m.info}`">{{m.title}}</router-link> -->

                <!-- 路由跳转并携带params参数，:to的对象写法 -->
                <router-link :to="{
                    name:'detail', // 通过路由名称跳转
                    params:{
                        id:m.id,
                        title:m.title,
                        info:m.info
                    }
                }">
                    {{m.title}}
                </router-link>
                <!-- 不借助router-link标签进行路由跳转，使用this.$router.push 或 this.$router.replace 的方式跳转 -->
                <button @click="pushShow(m)">push查看</button>
                <button @click="replaceShow(m)">replace查看</button>
            </li>
        </ul>
        <hr/>
        <router-view></router-view>
    </div>
</template>

<script>

    export default {
        name:'Message',
        data() {
            return {
                messageList:[
                    {
                        id:'001',title:'消息001',info:'测试数据001'
                    },
                    {
                        id:'002',title:'消息002',info:'测试数据002'
                    },
                    {
                        id:'003',title:'消息003',info:'测试数据003'
                    },
                ]
            }
        },
        methods:{
            pushShow(m){
                this.$router.push({ // 留痕迹的跳转
                    name:'detail', // 通过路由名称跳转
                    params:{
                        id:m.id,
                        title:m.title,
                        info:m.info
                    }
                })
            },

            replaceShow(m){
                this.$router.replace({ // 不留痕迹的跳转
                    name:'detail', // 通过路由名称跳转
                    params:{
                        id:m.id,
                        title:m.title,
                        info:m.info
                    }
                })
            }
        }
    }
</script>